<template>
    <div class="app-container">
        <!-- 功能性按钮 -->
        <el-form :inline="true" :model="query" size="mini">
            <el-form-item label="分类名称：">
                <el-input v-model.trim="query.name"></el-input>
            </el-form-item>
            <el-form-item label="状态：">
                <el-select v-model="query.status" clearable filterable style="width:85px">
                <el-option
                    v-for="item in statusOptions"
                    :key="item.code" 
                    :label="item.name" 
                    :value="item.code">
                 </el-option>
               </el-select>
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
                <el-button  icon="el-icon-refresh" @click="reload">重置</el-button>
                <el-button  icon="el-icon-plus" type="primary"  @click="openAdd"> 新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格主体 -->
        <el-table :data="list" stripe style="width: 100%">
            <el-table-column  label="序号" width="60" type="index"></el-table-column>
            <el-table-column prop="name" align="center" label="分类名称"></el-table-column>
            <el-table-column prop="sort" label="排序"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status | statusFilter">
                        {{scope.row.status ? "正常":"禁用"}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column  label="操作" >
                 <template slot-scope="scope">
                    <el-button type="success" @click="handleEdit(scope.row.id)" size="mini">编辑</el-button>
                    <el-button type="danger"  @click="handleDelete(scope.row.id)" size="mini">删除</el-button>
                </template>
            </el-table-column>
            
        </el-table>
        <!-- 分页功能 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[10, 20, 50]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>
        <edit :title="edit.title" :visible="edit.visible" :formData="edit.formData" :remoteClose="remoteClose"></edit>
    </div>
</template>

<script>
import api from '@/api/category'
import Edit from './edit.vue'
const statusOptions = [
    {code:0,name:"禁用"},
    {code:1,name:"正常"}
]
export default {
    name:'Category',
    data(){
       return {
           list:[],
            page:{  //分页对象
                total:0,    //总记录数
                current:1,  //当前页码
                size:20,    //每页现实多少条                
            },
            query:{}, //查询条件
            statusOptions,  //状态下拉框数组statusOptions:statusOptions
            edit:{
                title:"",
                visible:false,
                formData:{}
            }
       }
    },
    created(){
        this.fetchData()
    },
    filters:{
        statusFilter(status){
            //0是禁用，1是正常
            const statusMap = {0:'danger',1:'info'}
            return statusMap[status]
        }
    },
    methods:{
        fetchData(){
            api.getList(this.query,this.page.current,this.page.size).then(response=>{
                console.log("response",response)
                //列表数据
                this.list = response.data.records
                //this.total
                this.page.total = response.data.total

            })
        },
        //编辑功能
        handleEdit(id){
            //通过ID查询详情
            api.getByID(id).then(response=>{
                if(response.code === 20000){
                   // 将查询的数据传递
                    this.edit.formData = response.data
                    this.edit.title = "编辑"
                    this.edit.visible = true
                }
                console.log(response)
            })
        },
        //删除功能
        handleDelete(id){
            this.$confirm('确认删除这条记录吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                //发送删除请求  
                api.deleteById(id).then(res=>{
                    //处理响应结果
                    this.$message({
                        type: res.code === 20000 ? "success":"error",
                        message: res.message
                    });
                  //刷新列表
                  this.fetchData()                   
                })          
            }).catch(() => {
                //取消删除
            });
        },
        // 每页显示多少条，当页码改变后触发到此方法，val是当前点击或输入的那个页码
        handleSizeChange(val){
            this.page.size = val  //更新一页多少条
            this.fetchData()
        },
        //当页码改变后触发这个方法
        handleCurrentChange(val){
            this.page.current = val
            this.fetchData()
        },
        //条件查询
        queryData(){
            //将页码变为1
            this.page.current = 1
            this.fetchData()
        },
        //重置
        reload(){
            this.query = {}
            this.fetchData()
        },
        //子组件触发此事件方法来关闭窗口
        remoteClose(){
            this.edit.formData = {}
            this.edit.visible = false
            // this.fetchData()
        },
        //打开新窗口
        openAdd(){
            this.edit.visible = true,
            this.edit.title = "新增"
        }
    },
//部件
 components: {
     Edit
 },
//对象内部的属性监听，也叫深度监听
 watch: {
 },
//属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
 computed: { 
 },
 mounted() {
}
}
</script>

<style scoped>

</style>
